<template>
  <div class="courier">
    <div class="form">
      <el-form ref="form" :model="form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="快递员账号:" label-width="100px">
              <el-input v-model="form.account" placeholder="请输入快递员账号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递员姓名:" label-width="100px">
              <el-input v-model="form.name" placeholder="请输入快递员姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="快递员手机号:" label-width="110px">
              <el-input v-model="form.mobile" placeholder="请输入快递员手机" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" style="margin-right:30px;">
            <el-form-item label="所属机构:" label-width="80px">
              <el-select v-model="form.agencyName" placeholder="请选择" style="width:100%;">
                <el-option value="1212" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-button type="danger">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table
        border
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="序号"
          width="150"
        />
        <el-table-column
          prop="name"
          label="快递员账号"
          width="200"
        />
        <el-table-column
          prop="province"
          label="快递员姓名"
          width="200"
        />
        <el-table-column
          prop="city"
          label="快递员手机号"
          width="200"
        />
        <el-table-column
          prop="address"
          label="所属机构"
          width="200"
        />
        <el-table-column
          prop="address"
          label="工作状态"
          width="300"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template>
            <el-link type="primary">作业范围分配</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getCourierList } from '@/api/employee'
export default {
  name: 'CourierEmployee',
  data() {
    return {
      courierForm: {
        page: '1',
        pageSize: '10',
        name: null,
        mobile: null
      },
      form: {
        account: '',
        name: '',
        mobile: '',
        agencyName: ''
      },
      tableData: []
    }
  },
  async created() {
    const res = await getCourierList(this.courierForm)
    console.log(res)
  },
  methods: {
    handleReset() {
      // 清空表单
      this.form = {
        account: '',
        name: '',
        mobile: '',
        agencyName: ''
      }
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
  .form {
    width: 1125px;
    padding: 20px 10px;
    margin: 20px auto;
    background-color: #fff;
   ::v-deep {
      .el-form-item__label {
                font-size: 12px;
                font-weight: 400;
              }
      }
    .el-button {
      width: 100px;
    }
  }
  .table {
     width: 1125px;
    padding: 20px 20px;
    margin: 20px auto;
    background-color: #fff;
  }
</style>
